<template>
  <view class="page-container">
    <scroll-view class="list-container" scroll-y="true">
      <view v-for="(list, index) in groups" :key="index" class="category">
        <view class="category-header">
          <text class="category-title">{{ prefixArray[index].prefixName }}</text>
          <text class="category-count" v-if="list.length">{{ list.length }} 个</text>
        </view>
        <view v-for="item in list" :key="item.id" class="item">
          <text>{{ item.epc }}</text>
        </view>
      </view>
    </scroll-view>
	<infoScan @newItem="addItem" :subString="ncat"></infoScan>
    <button class="fixed-button" @click="onButtonClick">固定按钮</button>
  </view>
</template>

<script>
	import infoScan from '@/components/infoScan/infoScan.vue'
	import{getEpcNumToInfo} from '@/api/admin.js'
export default {
  data() {
    return {
      items: [
        { id: 1, type: '1234567890cat', name: 'Cat' },
        { id: 2, type: '1234567890dog', name: 'Dog' },
        { id: 3, type: 'abcdefghijkcactus', name: 'Cactus' },
        { id: 4, type: '1234567890bird', name: 'Bird' },
        { id: 5, type: 'abcdefghijktree', name: 'Tree' }
      ],
      groups: [],  // 用数组存储分组数据
      prefixArray: [],  // 存储前缀和索引
      nextIndex: 0,  // 下一个可用的索引
	  ncat:"4850"
    };
  },
  components:{
	  infoScan,
  },
  computed: {
    // groupedItems() {
    //   const groups = {};
    //   this.items.forEach(item => {
    //     const prefix = item.type.substring(0, 10);  // 获取前10位字符
    //     if (!groups[prefix]) {
    //       groups[prefix] = [];
		  // // this.prefixName[prefix]=item.name;
    //     }
    //     groups[prefix].push(item);
    //   });
    //   return groups;
    // }
  },
  methods: {
	  hexToText(hexString) {
	      let text = '';
	      for (let i = 0; i < hexString.length; i += 2) {
	          let hex = hexString.substring(i, i + 2);
	          text += String.fromCharCode(parseInt(hex, 16));
	      }
	      return text;
	  },
	  addItem(data){
		// console.log("tag",data)  
		const prefix = data.epc.substring(0, 16);  // 获取前10位字符
		// console.log(prefix)
		let index = this.prefixArray.findIndex(item => item.prefixName === prefix)
		 if (index==-1) {
		    this.$set(this.groups, this.nextIndex, [data]); // 如果前缀不存在，初始化数组并添加第一个元素
			let epcString = this.hexToText(data.epc)
			console.log("epcString",epcString)
			getEpcNumToInfo({'epcNum':epcString}).then(res=>{
				console.log(res)
				if(res.code==200){
					let p = {
						'prefixName':res.data.baseMat.matName,
						'index':index
					}
					this.$set(this.prefixArray, this.nextIndex, p);
					this.nextIndex+=1;
				}
			})

		  } else {
		    this.groups[index].push(data); // 如果前缀已存在，直接添加元素到数组
		  }
		
		// console.log(this.groups[prefix])
	  },
    onButtonClick() {
      console.log('固定按钮点击');
      // 在这里添加按钮点击时的逻辑
    }
  }
};
</script>

<style scoped>
.page-container {
  position: relative;
  height: 100%;
}

.list-container {
  height: 100%;
  padding-bottom: 60px; /* 留出足够空间给固定按钮 */
}

.category {
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.category-header {
  display: flex;
  justify-content: space-between;
  background-color: #f0f0f0;
  padding: 10px 15px;
  border-bottom: 1px solid #e0e0e0;
}

.category-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.category-count {
  font-size: 14px;
  color: #666;
}

.item {
  padding: 10px 15px;
  border-bottom: 1px solid #e0e0e0;
}

.item:last-child {
  border-bottom: none;
}

.fixed-button {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 40px;
  line-height: 40px;
  background-color: #007aff;
  color: white;
  text-align: center;
  border-radius: 20px;
  font-size: 16px;
}
</style>
